<script setup lang="ts">
import formButton from '@renderer/components/formButton.vue'
import useCommon from '@renderer/composables/useCommon'
import useProject from '@renderer/composables/useProject'
import useUtil from '@renderer/composables/useUtil'
import { CascaderProps, CascaderValue } from 'element-plus'
import dayjs from 'dayjs'
import { reactive, ref } from 'vue'
const initParams = () => ({
  keywords: '',
  date: '',
  date_type: '0',
  status: '-1',
  designer: '0',
  project_manage: '0',
  page: 1,
  limit: 10,
})
const projectQuery = reactive(initParams())
const designerName = ref('')
const projectManageName = ref('')
const identityList = ref<string[]>([])
const currentType = ref<initType>('init')
const statusOptions = [
  {
    value: '-1',
    label: '全部',
  },
  {
    value: '1',
    label: '未开工',
  },
  {
    value: '2',
    label: '施工中',
  },
  {
    value: '4',
    label: '已完成',
  },
  {
    value: '3',
    label: '退单',
  },
]
const handleNextPage = async (val: number) => {
  await initData(currentType.value, val)
}
const handleReset = async () => {
  Object.assign(projectQuery, initParams())
  currentType.value = 'init'
  designerName.value = ''
  await initData('init', 1)
}
const designerProps = {
  lazy: true,
  lazyLoad(node, resolve) {
    const { level, data } = node
    setTimeout(async () => {
      let nodes
      switch (level) {
        case 0:
          identityList.value = []
          identityList.value = await handleGetIdentity()
          identityList.value.unshift('全部')
          nodes = identityList.value.map((item) => ({
            value: '',
            label: item,
            leaf: item == '全部' ? true : level >= 1,
          }))
          break
        case 1:
          await getStaff({
            type: data?.label,
            scene: 1,
          })
          if (peopleList.value?.length) {
            nodes = peopleList.value.map((item) => ({
              value: item.id,
              label: item.name,
              leaf: level >= 1,
            }))
          }
          break
      }
      resolve(nodes)
    }, 1000)
  },
} as CascaderProps
const change = (value: CascaderValue, keyWord: string) => {
  projectQuery[keyWord] = value[1] ? value[1] : '0'
}
const handleQuery = async () => {
  currentType.value = 'search'
  await initData(currentType.value, 1)
}
const handleProjectDir = (item: ProjectModel) => {
  window.api.closeWindow('projectDir', 'destroy')
  window.api.openWindow('projectDir', { title: item.name, work_id: item.id })
}
const initData = async (type: initType, page: number) => {
  const params = {
    keywords: type == 'init' ? '' : projectQuery.keywords,
    date: type == 'init' ? '' : projectQuery.date ? dayjs(projectQuery.date).format('YYYY-MM') : '',
    date_type: type == 'init' ? '0' : projectQuery.date ? '2' : '',
    status: type == 'init' ? '-1' : projectQuery.status,
    designer: type == 'init' ? '0' : projectQuery.designer,
    project_manage: type == 'init' ? '0' : projectQuery.project_manage,
    page: page,
    limit: 10,
  }
  await Promise.all([await getWorkList(params)])
}
const { getWorkList, projectList } = useProject()
const { getStaff, peopleList } = useCommon()
const { handleGetIdentity } = useUtil()
await initData('init', 1)
</script>

<template>
  <main class="bg-white flex flex-col gap-3 rounded-md" style="height: -webkit-fill-available">
    <el-form :model="projectQuery" inline>
      <el-form-item label="项目名称">
        <el-input v-model="projectQuery.keywords" placeholder="请输入项目名称" clearable />
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker v-model="projectQuery.date" type="month" placeholder="请选择" />
      </el-form-item>
      <el-form-item label="项目状态">
        <el-select v-model="projectQuery.status" placeholder="请选择">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="设计师">
        <el-cascader :props="designerProps" v-model="designerName" @change="change($event, 'designer')" />
      </el-form-item>
      <el-form-item label="项目经理">
        <el-cascader :props="designerProps" v-model="projectManageName" @change="change($event, 'project_manage')" />
      </el-form-item>
    </el-form>
    <div class="flex justify-end gap-3">
      <formButton class="mr-3" @click="handleQuery"> 搜索 </formButton>
      <formButton @click="handleReset"> 重置 </formButton>
    </div>
    <el-table
      :data="projectList?.data"
      border
      header-align="center"
      :header-cell-style="{ background: '#FFF4E5', fontSize: '14px', color: '#888', fontWeight: '400' }">
      <el-table-column type="index" label="序号" align="center" width="55" />
      <el-table-column prop="name" label="项目名称" align="center" />
      <el-table-column prop="date" label="所属月份" align="center" width="200">
        <template #default="scope">
          {{ scope.row.date ? dayjs(scope.row.date * 1000).format('YYYY-MM-DD') : '请更新项目账本' }}
        </template>
      </el-table-column>
      <el-table-column prop="projectStatus" label="项目状态" align="center" width="85">
        <template #default="scope">
          {{ scope.row.start_check == '1' ? '已开始' : scope.row.start_check == '2' ? '未开始' : '已完成' }}
        </template>
      </el-table-column>
      <el-table-column prop="designer_name" label="设计师" align="center" width="85" />
      <el-table-column prop="project_manage_name" label="项目经理" align="center" width="85" />
      <el-table-column label="操作" align="center" width="100">
        <template #default="scope">
          <el-button type="warning" plain size="small" @click="handleProjectDir(scope.row)">项目文件</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleNextPage"
      :current-page="projectList?.current_page"
      :page-size="projectQuery.limit"
      :total="projectList?.total"
      background
      hide-on-single-page
      class="flex-1 items-end" />
  </main>
</template>

<style lang="scss" scoped>
.el-form {
  display: flex;
}
.el-form-item {
  margin-bottom: 0px;
  margin-right: 20px !important;
  width: 178px;
  flex: 1;
}
</style>
